<template>
  <div class="container w" id="portfolio">
    <Title :data="titleData" />
    <nav class="wow animate__fadeInUp">
      <ul>
        <li :class="currentList === 0 ? 'active' : ''" @click="chanageList(0)">
          ALL
        </li>
        <li :class="currentList === 1 ? 'active' : ''" @click="chanageList(1)">
          APP
        </li>
        <li :class="currentList === 2 ? 'active' : ''" @click="chanageList(2)">
          CARD
        </li>
        <li :class="currentList === 3 ? 'active' : ''" @click="chanageList(3)">
          WEB
        </li>
      </ul>
    </nav>
    <ul class="exhibition wow animate__fadeInUp">
      <li v-for="(item, index) in selectList(currentList)" :key="index">
        <img :src="require(`./images/portfolio-${item}.jpg`)" alt="" />
        <div class="links">
          <a href="#">
            <span class="iconfont">&#xeaf3;</span>
          </a>
          <a href="#">
            <span class="iconfont">&#xe600;</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Title from "../Title";
export default {
  components: { Title },
  data() {
    return {
      titleData: {
        title: "Portfolio",
        text: "Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.",
      },
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      list1: [1, 2, 3],
      list2: [4, 5, 6],
      list3: [7, 8, 9],
      currentList: 0,
    };
  },
  mounted() {
    this.$wow.init();
  },
  methods: {
    selectList(num) {
      switch (num) {
        case 1:
          return this.list1;
        case 2:
          return this.list2;
        case 3:
          return this.list3;
        default:
          return this.list;
      }
    },
    chanageList(num) {
      this.currentList = num;
    },
  },
};
</script>
<style lang="less" scoped>
nav {
  display: flex;
  justify-content: center;
  ul {
    box-sizing: border-box;
    padding: 2px 15px;
    border-radius: 50px;
    text-align: center;
    background: #ecf5f9;
    li {
      float: left;
      padding: 10px 15px 8px 15px;
      cursor: pointer;
      color: #2f4d5a;
      &:hover {
        color: #67b0d1;
      }
    }
    .active {
      color: #67b0d1;
    }
  }
}
.exhibition {
  margin: 35px 0 60px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 32%;
    margin-bottom: 30px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    img {
      max-width: 100%;
      height: auto;
    }
    &::before {
      content: "";
      background: rgba(255, 255, 255, 0.5);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      transition: all ease-in-out 0.3s;
      z-index: 2;
      opacity: 0;
    }
    &:hover::before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1;
    }

    .links {
      height: 42px;
      width: 100%;
      position: absolute;
      bottom: -60px;
      z-index: 3;
      background: rgba(103, 176, 209, 0.75);
      transition: all ease-in-out 0.3s;
      display: flex;
      justify-content: space-around;
      a {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        &:hover {
          background: rgba(103, 176, 209, 0.95);
        }
        span {
          font-size: 28px;
          color: #fff;
        }
      }
    }

    &:hover .links {
      bottom: 0;
      opacity: 1;
    }
  }
}
</style>